<template>
	<view class="new_page">
		<!-- <button open-type="contact" bindcontact="handleContact">小程序客服</button> -->
		<view class="main">
			<uni-section title="选择地区" type="line" padding style="height: calc(100vh - 100px);">
				<uni-data-picker placeholder="请选择所在地区" popup-title="请选择所在地区" :localdata="dataTree" v-model="classes"
					@change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
				</uni-data-picker>
			</uni-section>
			<view class="form_wrap">
				<uni-forms :modelValue="formData">
					<view class="div_box">
						<uni-forms-item label="康复中心名称">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
								v-model="formData.name" placeholder="输入..." />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="品牌名称">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
								v-model="formData.brandName" placeholder="输入..." />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="介绍">
								<my-editor v-model="formData.shortdescription"></my-editor>
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="地址">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
								v-model="formData.position" placeholder="输入..." />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="活动信息">
								<my-editor v-model="formData.discountInfo"></my-editor>
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="联系电话">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="number"
								v-model="formData.phoneNumber" placeholder="输入..." />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="所在省份">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
								v-model="formData.province" placeholder="输入..." />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="所在城市">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
								v-model="formData.city" placeholder="输入..." />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="邮箱">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
								v-model="formData.contactEmail" placeholder="输入..." />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="营业开始时间">
							<view class="text-right" @click="isShow = true">
								<text v-if="formData.openingTime">{{ formData.openingTime }}</text>
								<text v-else>选择营业开始时间</text>
							</view>
							<pickTime :isShow="isShow" @close="(bol) => (isShow = bol)" @complete="
                  (time) => {
                    formData.openingTime = time;
                  }
                "></pickTime>
						</uni-forms-item>
					</view>

					<view class="div_box">
						<uni-forms-item label="标签">
							<view class="tag_wrap" v-if="formData.tagArr.split(';').length > 0">
								<view :key="Math.random()" v-for="(item, index) in formData.tagArr.split(';')">
									<view class="tag_item">
										<uni-tag :inverted="true" :text="item" type="primary" />
										<!-- <uni-icons type="minus-filled" size="20" color="#007bfb" @click="subTag(index)"></uni-icons> -->
									</view>
								</view>
							</view>
							<view class="change_wrap">
								<view class="tag_input_wrap" v-if="showTaginput">
									<uni-easyinput @clear="showTaginput = false" :placeholderStyle="placeholderStyle" v-model="tagValue"
										:inputBorder="false" type="text" placeholder="输入..." :focus="true" />

									<view class="qd_btn">
										<button size="mini" class="uni-primary-bg uni-white" @click="addTag">
											确定添加
										</button>
									</view>
								</view>
								<view class="" v-else>
									<button size="mini" @click="showTaginput = true">
										编辑标签
									</button>
								</view>
							</view>
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="微信号" name="job">
							<uni-easyinput :placeholderStyle="placeholderStyle" :inputBorder="false" type="text"
								v-model="formData.weixin" placeholder="输入..." />
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="店铺logo" label-position="top">
							<!-- logo -->
						</uni-forms-item>
					</view>
					<view class="div_box">
						<uni-forms-item label="门店轮播图" label-position="top">
							<!-- 轮播 -->
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
		</view>
		<!-- <view class="fix_btn">
			<button :class="['btn-r', isActive ? 'b-bg' : 'b-grey-bg']" @click="submit">
				完成
			</button>
		</view> -->
	</view>
</template>

<script>
	import {
		upLoadImg,getrehabCenterDetail
	} from '@/request/api.js'

	export default {
		data() {
			return {
				showTaginput: false,
				isShow: false,
				isShow2: false,
				isActive: false,
				placeholderStyle: "font-size: 28rpx;text-align:right",
				formData: {
					name: "",
					brandName: "",
					shortdescription: "",
					position: "",
					phoneNumber: "",
					discountInfo: "",
					province: "",
					city: "",
					contactEmail: "",
					openingTime: "",
					// startTime: "",
					// endTime: "",
					tags: "",
					wechatNumber: "",
					thumbnail: "",
					imageList: [],
				},
				tagValue: "",
				classes: '',
				dataTree: [{
						text: "广东省",
						value: "1-0",
						children: [{
								text: "广州市",
								value: "1-1"
							},
							{
								text: "茂名市",
								value: "1-2"
							}
						]
					},
					{
						text: "二年级",
						value: "2-0",
						children: [{
								text: "2.1班",
								value: "2-1",
								children: [
									{
										text: "第三层",
										value: "第三层"
									}
								]
							},
							{
								text: "2.2班",
								value: "2-2"
							}
						]
					},
				]
			};
		},
		watch: {
			formData: {
				handler: function(newValue, oldValue) {
					let arr = Object.values(this.formData);
					let bol = arr.every((item) => {
						return typeof item != "object" ? !!item : item.length > 0;
					});
					this.isActive = bol;
				},
				deep: true,
			},
		},
		onLoad() {
			this.getrehabCenterDetail();
		},
		mounted() {
			// uni.showModal({
			//   title: '提示',
			//   content: '是否确定提交？',
			//   success (res) {
			//     if (res.confirm) {

			//     } else if (res.cancel) {

			//     }
			//   }
			// })
		

		},
		methods: {
			async getrehabCenterDetail(e) {
				let res = await getrehabCenterDetail()
				if(res.code==200){
					console.log(res.data)
					this.formData = res.data
				}
			},
			// 小程序客服
			handleContact(e) {
				console.log(e.detail.path)
				console.log(e.detail.query)
			},

			addTag() {
				if (!this.tagValue) {
					return;
				}
				this.formData.tagArr.push(this.tagValue);
				this.tagValue = "";
				this.showTaginput = false;
			},
			subTag(index) {
				this.formData.tagArr.splice(index, 1);
			},
			async selectLogo(e) {
				console.log('选择文件：', e)
				// upLoadImg() tempFilePaths
				let res = await upLoadImg(e.tempFilePaths[0], 'image');
				console.log(res)
				this.formData.imageValueLogo.push(...e.tempFiles)
				console.log(this.formData.imageValueLogo)

			},
			deleteLogo(e) {
				let index = this.formData.imageValueLogo.indexOf(e.tempFile.name);
				this.formData.imageValueLogo.splice(index, 1);
			},
			selectLb(e) {
				console.log('选择文件lo：', e)
				// upLoadImg()
				this.formData.imageValueLB.push(...e.tempFiles)
				console.log(this.formData.imageValueLB)
			},
			deleteLb(e) {
				let index = this.formData.imageValueLB.indexOf(e.tempFile.name);
				this.formData.imageValueLB.splice(index, 1)
			},

			// 提交
			submit() {
				if (!this.isActive) {
					return
				}
				console.log(this.formData)
			},
			
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			}
		},
	};
</script>

<style lang="scss" scoped>
	.tag_wrap {
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		align-items: center;
		margin-bottom: 30rpx;

		.tag_item {
			display: flex;
			align-items: center;
			margin-right: 20rpx;
			margin-top: 20rpx;
		}
	}

	.change_wrap {
		display: flex;
		justify-content: flex-end;
	}

	.tag_input_wrap {
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.qd_btn {
			margin-left: 20rpx;
		}
	}

	.new_page {
		width: 100%;
		padding-top: 30rpx;
		margin: auto;
		// padding-bottom: 60rpx;

		.main {
			padding: 0 20rpx 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
		}

		.form_wrap {
			/deep/.uni-forms-item__content {
				padding: 20rpx 0;
				border-bottom: 1px solid $line-grey;

				input {
					text-align: right;
				}
			}

			/deep/.uni-forms-item__label {
				font-size: 28rpx !important;
			}
		}
	}

	.fix_btn {
		// position: fixed;
		width: 90%;
		// left: 0;
		// right: 0;
		padding: 80rpx 0;
		margin: auto;
		// bottom: 40rpx;
	}
</style>